<style lang='scss' scoped>
@import "@css/style.scss";
.shopping {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  &-content {
    background-color: $bgColor;
    border-top: px2rem(1) solid $lineColor;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    // 商品列表
    &-list {
      height: 100%;
      overflow: hidden;
      overflow-y: auto;

      &-item {
        background-color: #fff;
        padding: $marginSize;
        display: flex;
        border-bottom: px2rem(1) solid $lineColor;

        &-check {
          width: $checkSize;
          align-self: center;
          padding: px2rem(6);
        }
        &-img {
          height: $goodsOptionsHeight;
          width: $goodsOptionsHeight;
        }
        &-desc {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0 $marginSize;
          &-name {
            font-size: $infoSize;
            line-height: px2rem(18);
          }
          &-data {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: $marginSize;
            &-price {
              font-size: $titleSize;
              color: $mainColor;
              font-weight: 500;
            }
          }
        }
      }
    }
    //总计
    &-total {
      height: px2rem(56);
      box-sizing: border-box;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-top: px2rem(1) solid $lineColor;

      &-check {
        display: flex;
        align-items: center;
        margin-left: $marginSize;
        margin-right: $marginSize;
        img {
          width: $checkSize;
          height: $checkSize;
          padding: px2rem(6);
        }
        p {
          font-size: $infoSize;
        }
      }

      &-price {
        flex-grow: 2;
        display: flex;
        flex-direction: column;
        &-total {
          font-size: $titleSize;
          margin-bottom: px2rem(6);
          span {
            font-weight: bold;
          }
        }
        &-all {
          font-size: $minInfoSize;
          span {
            font-weight: bold;
          }
        }
      }

      &-commit {
        width: px2rem(120);
        height: 100%;
        font-size: $titleSize;
        background-color: $mainColor;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
<template>
  <div class="shopping">
    <navigation-bar :pageName="'购物车'" :isShowBack="false"></navigation-bar>
    <div class="shopping-content">
      <div class="shopping-content-list">
        <!-- 商品 -->
        <div
          class="shopping-content-list-item"
          v-for="(item, index) in shoppingDatas"
          :key="index"
        >
          <!-- check -->
          <img
            class="shopping-content-list-item-check"
            :src="checkImg(item.isCheck)"
            @click="onGoodsCheckClick(item)"
            alt=""
          />
          <!-- 图片 -->
          <img class="shopping-content-list-item-img" :src="item.img" alt="" />
          <!-- 描述 -->
          <div class="shopping-content-list-item-desc">
            <!-- 名称 -->
            <p class="shopping-content-list-item-desc-name text-line-2">
              <!-- 直营 -->
              <direct v-if="item.isDirect"></direct>
              {{ item.name }}
            </p>
            <div class="shopping-content-list-item-desc-data">
              <!-- 价格 -->
              <p class="shopping-content-list-item-desc-data-price">
                ￥{{ item.price | priceValue }}
              </p>
              <!-- 商品数量的控制组件 -->
              <number-manager :defaultNumber="item.number" @onChangeNumber="onNumberChange(arguments,item,index)"></number-manager>
            </div>
          </div>
        </div>
      </div>
      <!-- 统计 -->
      <div class="shopping-content-total">
        <!-- 全选的check -->
        <div class="shopping-content-total-check">
          <img :src="checkImg(totalData.isAll)" alt="" @click="onAllCheckClick"/>
          <p>全选</p>
        </div>
        <!-- 总价格 -->
        <div class="shopping-content-total-price">
          <p class="shopping-content-total-price-total">
            合计: <span>￥{{ totalData.totalPrice | priceValue }}</span>
          </p>
          <p class="shopping-content-total-price-all">
            总额:<span>￥{{ totalData.totalPrice | priceValue }}</span
            >&nbsp;&nbsp;立减<span>￥0.00</span>
          </p>
        </div>
        <!-- 结算 -->
        <div class="shopping-content-total-commit">
          去结算({{ totalData.goodsNumber }})
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import NavigationBar from "./currency/NavigationBar.vue";
import Direct from "./goods/Direct.vue";
import NumberManager from './goods/NumberManager.vue';
export default {
  components: {
    NavigationBar,
    Direct,
    NumberManager,
  },
  data() {
    return {
      //购物车商品
      shoppingDatas: this.$store.state.shoppingDatas,
      //总计
      totalData: {
        //是否全选
        isAll: false,
        //总价格
        totalPrice: 0,
        //总数量
        goodsNumber: 0,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    /**
     * 数量改变
     */
    onNumberChange($arguments,item,index){
      let number=$arguments[0];
      //修改对应的商品数量
      this.$store.commit('changeShoppingDataNumber',{
        index:index,
        number:number
      })
      if(item.isCheck){
        this.computeGoodsTotal();
      }
    },
    //商品按钮事件
    onGoodsCheckClick(item){
      item.isCheck=!item.isCheck;
      this.computeGoodsTotal();
    },
    //全选
    onAllCheckClick(){
      this.totalData.isAll=!this.totalData.isAll;
      this.shoppingDatas.forEach(item => {
        return item.isCheck=this.totalData.isAll
      });
      this.computeGoodsTotal();
    },
    //check按钮图标
    checkImg(isCheck){
      return isCheck ? require('@img/check.svg'):require('@img/no-check.svg')
    },
    //计算总计数据
    computeGoodsTotal(){
      this.totalData={
        //是否全选
        isAll: true,
        //总价格
        totalPrice: 0,
        //总数量
        goodsNumber: 0,
      }
      this.shoppingDatas.forEach(item=>{
        if(item.isCheck){
          this.totalData.totalPrice+=parseFloat(item.price)*parseInt(item.number);
          this.totalData.goodsNumber+=parseInt(item.number);
        }else{
          this.totalData.isAll=false;
        }
      })
    }
  },
  computed: {},
};
</script>
